<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
    </div>
      
    <button class="add">添加节点</button>
    <button class="del">删除节点</button>
    <script>
        document.querySelector('.add').addEventListener(
            'click',
            function () {
                // 添加节点-创建 a 标签
                const a = document.createElement('a')
                // 设置内容
                a.innerHTML = '西红柿炒蛋'
                a.href = 'https://www.baidu.com'
                a.target='_blank'

                // 创建完成的节点, 还没有添加到页面上, 需要调用 append(在末尾添加) 或 prepend(在开头添加)
                document.querySelector('body').prepend(a)
            }
        )

        // 当选择器使用的不是标签选择器时, 无法推断出是什么标签, 可能没有代码提示
        document.querySelector('.del').addEventListener('click', function() {
            // 自己删掉自己
            // this.remove()

            // 找到所有 span, 一个一个删掉
            // document.querySelectorAll('span').forEach(item => {
            //     item.remove()
            // })

            // 每隔 1s 删一个 span
            document.querySelectorAll('span').forEach((item, index) => {
                setTimeout(() => {
                    item.remove()
                }, (index + 1) * 1000)
            })
        })
    </script>
</body>
</html>